<template>
  <div class="content">
    <div id="login">
      <el-form
        class="loginFrom"
        :model="logindata"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item class="login-item">
          <h1 class="login-title">登录中心</h1>
        </el-form-item>
        <el-form-item prop="userName">
          <el-input
            class="login-inputorbuttom"
            prefix-icon="el-icon-user"
            placeholder="登录名"
            v-model="logindata.userName"
            @keyup.enter.native="loginButton"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            class="login-inputorbuttom"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            type="password"
            v-model="logindata.password"
            @keyup.enter.native="loginButton"
          ></el-input>
        </el-form-item>
        <el-form-item class="login-item">
          <el-button
            class="login-inputorbuttom login-bottom"
            type="primary"
            :loading="logining"
            v-popover:popover
            @click="loginButton"
            >登 录</el-button
          >
          <div class="memo">
            <span style="cursor: pointer">忘记密码</span>
            <span style="cursor: pointer" @click="jumpPage()">注册账号</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!--验证码弹窗-->
    <el-popover
      popper-class="slidingPictures"
      ref="popover"
      trigger="manual"
      v-model="visible"
    >
      <div class="sliding-pictures">
        <Verification
          ref="verificationImg"
          @closePupUp="closePupUp"
          @login="login"
        />
        <div class="operation">
          <span
            title="关闭验证码"
            @click="closePupUp"
            class="el-icon-circle-close"
          ></span>
          <span
            title="刷新验证码"
            @click="canvasInit"
            class="el-icon-refresh-left"
          ></span>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import Verification from "./Verification";
export default {
  components: {
    Verification,
  },
  data() {
    return {
      logining: false, // 登录加载提示
      logindata: {
        userName: "",
        password: "",
        verificationCode: "",
      },
      rules: {
        userName: [{ required: true, message: "请填写密码" }],
        password: [{ required: true, message: "请填写密码" }],
      },
      visible: false, //弹窗开启关闭

      //拼图是否正确
      puzzle: false,
    };
  },
  watch: {
    visible(e) {
      if (e === true) {
        // 初始化拼图
        this.$refs.verificationImg.Event_initImg();
        this.puzzle = false;
      }
    },
  },
  mounted() {},
  methods: {
    // 登录按钮
    loginButton() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.visible = true;
          this.puzzle = false;
        }
      });
    },
    //刷新拼图验证码
    canvasInit() {
      this.$refs.verificationImg.Event_restImg();
    },
    // 关闭验证码
    closePupUp() {
      this.visible = false;
    },

    // 注册
    jumpPage() {},
    // 登录
    login() {
      console.log("进入主页");
    },
  },
};
</script>

<style>
.slidingPictures {
  /* padding: 0; */
  /* width: 300px; */
  padding: 10px;
  width: 310px;
  border-radius: 2px;
}
</style>

<style lang="scss" scoped>
.content {
  background-image: url('../../assets/cao.jpg');
  background-size: 100% 100%;
}
#login {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .loginFrom {
    width: 300px;
    margin-top: -10vw;
    margin-right: 10vw;
    ::v-deep .el-form-item__error {
      padding-left: 10px;
    }
    .login-item {
      display: flex;
      justify-content: center;
      align-items: center;
      .memo,
      .joint-logon {
        color: #f9f9f9;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        height: 20px;
      }
      .joint-logon {
        margin-top: 3px;
        justify-content: flex-start;
        align-items: center;
        height: 25px;
        .login-tips {
          margin-right: 7px;
        }
        .logon-icon {
          width: 25px;
          height: 25px;
          margin-right: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 2px;
          background: rgba(255, 255, 255, 0.8);
          cursor: pointer;
          &:hover {
            background: rgba(28, 136, 188, 0.5);
          }
          > img {
            width: 85%;
            height: 85%;
          }
        }
      }
    }
    .login-title {
      color: #ffffff;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .login-bottom {
      margin-top: 15px;
    }
    .login-bottom:hover {
      background: rgba(28, 136, 188, 0.5);
    }
    .login-bottom:active {
      background: rgba(228, 199, 200, 0.5);
    }
    ::v-deep.login-inputorbuttom {
      height: 40px;
      width: 300px;
      background: rgba(57, 108, 158, 0.5);
      border-radius: 20px;
      border: #396c9e 1px solid;
      font-size: 14px;
      color: #ffffff;
      .el-input--small,
      .el-input__inner {
        line-height: 43px;
        border: none;
        color: #ffffff;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        background: transparent;
        text-align: center;
      }
      .el-input__icon {
        line-height: 40px;
        font-size: 16px;
      }
    }
  }
}

.blog {
  font-size: 14px;
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    color: #ff4758;
  }
}

/*该样式最终是以弹窗插入*/
.sliding-pictures {
  width: 100%;
  .operation {
    width: 100%;
    height: 40px;
    > span {
      color: #9fa3ac;
      display: inline-block;
      width: 40px;
      font-size: 25px;
      line-height: 40px;
      text-align: center;
      &:hover {
        background: #e2e8f5;
      }
    }
  }
}
</style>
